
<%@ page import="auctionhaus.Listing" %>
<!doctype html>
<html>
	<head>
		<meta name="layout" content="main">
		<g:set var="entityName" value="${message(code: 'listing.label', default: 'Listing')}" />
		<title><g:message code="default.show.label" args="[entityName]" /></title>
        <link rel="stylesheet" href="${resource(dir: 'js/fancybox', file: 'jquery.fancybox.css')}" type="text/css"/>

        <script type="text/javascript" src="${resource(dir: 'js', file: 'jquery-1.7.1.min.js')}" ></script>
        <script type="text/javascript" src="${resource(dir: 'js', file: 'knockout-2.0.0.js')}"></script>
        <script type="text/javascript" src="${resource(dir: 'js/fancybox', file: 'jquery.fancybox.pack.js')}"></script>

        <script type="text/JavaScript">
            $(document).ready(function() {
                //var observableBids = ko.observableArray([{"class":"auctionhaus.Bid","id":15,"amount":19,"bidder":{"class":"Customer","id":1},"dateCreated":"2012-04-07T14:55:10Z","listing":{"class":"Listing","id":2}},{"class":"auctionhaus.Bid","id":14,"amount":18,"bidder":{"class":"Customer","id":1},"dateCreated":"2012-04-07T14:55:10Z","listing":{"class":"Listing","id":2}},{"class":"auctionhaus.Bid","id":13,"amount":17,"bidder":{"class":"Customer","id":1},"dateCreated":"2012-04-07T14:55:10Z","listing":{"class":"Listing","id":2}},{"class":"auctionhaus.Bid","id":12,"amount":16,"bidder":{"class":"Customer","id":1},"dateCreated":"2012-04-07T14:55:10Z","listing":{"class":"Listing","id":2}},{"class":"auctionhaus.Bid","id":11,"amount":15,"bidder":{"class":"Customer","id":1},"dateCreated":"2012-04-07T14:55:10Z","listing":{"class":"Listing","id":2}},{"class":"auctionhaus.Bid","id":10,"amount":14,"bidder":{"class":"Customer","id":1},"dateCreated":"2012-04-07T14:55:10Z","listing":{"class":"Listing","id":2}},{"class":"auctionhaus.Bid","id":9,"amount":13,"bidder":{"class":"Customer","id":1},"dateCreated":"2012-04-07T14:55:10Z","listing":{"class":"Listing","id":2}},{"class":"auctionhaus.Bid","id":8,"amount":12,"bidder":{"class":"Customer","id":1},"dateCreated":"2012-04-07T14:55:10Z","listing":{"class":"Listing","id":2}},{"class":"auctionhaus.Bid","id":7,"amount":11,"bidder":{"class":"Customer","id":1},"dateCreated":"2012-04-07T14:55:10Z","listing":{"class":"Listing","id":2}},{"class":"auctionhaus.Bid","id":6,"amount":10,"bidder":{"class":"Customer","id":1},"dateCreated":"2012-04-07T14:55:10Z","listing":{"class":"Listing","id":2}}]);
                var observableBids  = ko.observableArray();
                function viewModel() {
                    this.bids = observableBids;
                    this.minBid = ko.observable("$");
                    this.status = ko.observable("");
            }

                var vm = new viewModel();

                function loadBids() {
                    observableBids.removeAll();
                    $.ajax({
                        url: "../../api/bid/getbids/${listingInstance.id}"
                    }).done(function(data){
                                for(x=0; x<data.length; x++) {
                                    observableBids.push(data[x]);
                                }
                            });
                }

                function getListing() {
                    $.ajax({
                        url: "../../api/listing/getlisting/${listingInstance.id}"
                    }).done(function(listing){
                                vm.minBid("$" + listing.minBid);
                            });
                }

                function ajaxUpdate() {
                    loadBids();
                    getListing();
                }

                loadBids();
                getListing();
                setInterval(ajaxUpdate, 15000);

                ko.applyBindings(vm);

                $('.fancybox').fancybox({closeClick:false});

                $('#addBidLink').click(function() {
                    vm.status("");
                    $('#inputDiv').css({display: 'block'});
                    $('#statusDiv').toggle({display: 'none'});
                });

                $('#newBidSubmit').click(function(){
                    vm.status("");
                    var bidAmt = $('#newBidAmount').val();
                    if(bidAmt == null || bidAmt == "") {
                        vm.status("Error: You must enter a bid amount!");
                    }
                    else {
                        var url = "../../api/bid/placebid/${listingInstance.id}/${session.customerLoggedInId}/" + bidAmt;
                        $.ajax({
                            type: 'PUT',
                            url: url
                        }).done(function(data){
                                    if(data.errors) {
                                        vm.status("There was an error submitting your bid! Please try again.");
                                    }
                                    else {
                                        vm.status("Your bid has been submitted!");
                                        ajaxUpdate();
                                    }
                                    $('#inputDiv').toggle({display: 'none'});
                                    $('#statusDiv').css({display: 'block'});
                                });
                    }
                });
            });
        </script>
	</head>
	<body>
		<a href="#show-listing" class="skip" tabindex="-1"><g:message code="default.link.skip.label" default="Skip to content&hellip;"/></a>
		<div class="nav" role="navigation">
			<ul>
				<li><a class="home" href="${createLink(uri: '/')}"><g:message code="default.home.label"/></a></li>
				<li><g:link class="list" action="list"><g:message code="default.list.label" args="[entityName]" /></g:link></li>
				<li><g:link class="create" action="create"><g:message code="default.new.label" args="[entityName]" /></g:link></li>
			</ul>
		</div>
		<div id="show-listing" class="content scaffold-show" role="main">
			<h1><g:message code="default.show.label" args="[entityName]" /></h1>
			<g:if test="${flash.message}">
			<div class="message" role="status">${flash.message}</div>
			</g:if>
            <g:if test="${listingInstance.isComplete}">
                <h1 style="text-align: center">This Listing is expired!</h1>
            </g:if>
            <g:else>
                <ol class="property-list listing">

                    <g:if test="${listingInstance?.name}">
                    <li class="fieldcontain">
                        <span id="name-label" class="property-label"><g:message code="listing.name.label" default="Name" /></span>

                            <span class="property-value" aria-labelledby="name-label"><g:fieldValue bean="${listingInstance}" field="name"/></span>

                    </li>
                    </g:if>

                    <g:if test="${listingInstance?.endTime}">
                    <li class="fieldcontain">
                        <span id="endTime-label" class="property-label"><g:message code="listing.endTime.label" default="End Time" /></span>

                            <span class="property-value" aria-labelledby="endTime-label"><g:formatDate format="dd-MMM-yyyy" date="${listingInstance?.endTime}" /></span>

                    </li>
                    </g:if>

                    <g:if test="${listingInstance?.description}">
                    <li class="fieldcontain">
                        <span id="description-label" class="property-label"><g:message code="listing.description.label" default="Description" /></span>

                            <span class="property-value" aria-labelledby="description-label"><g:fieldValue bean="${listingInstance}" field="description"/></span>

                    </li>
                    </g:if>

                    <g:if test="${listingInstance?.seller}">
                    <li class="fieldcontain">
                        <span id="seller-label" class="property-label"><g:message code="listing.seller.label" default="Seller" /></span>

                            <span class="property-value" aria-labelledby="seller-label"><g:link controller="customer" action="show" id="${listingInstance?.seller?.id}">${customerName.encodeAsHTML()}</g:link></span>

                    </li>
                    </g:if>

                    <g:if test="${listingInstance?.winner}">
                    <li class="fieldcontain">
                        <span id="winner-label" class="property-label"><g:message code="listing.winner.label" default="Winner" /></span>

                            <span class="property-value" aria-labelledby="winner-label"><g:link controller="customer" action="show" id="${listingInstance?.winner?.id}">${listingInstance?.winner?.encodeAsHTML()}</g:link></span>

                    </li>
                    </g:if>

                    <g:if test="${listingInstance?.startBid}">
                    <li class="fieldcontain">
                        <span id="startBid-label" class="property-label"><g:message code="listing.startBid.label" default="Starting Bid" /></span>

                            <span class="property-value" aria-labelledby="startBid-label"><g:fieldValue bean="${listingInstance}" field="startBid"/></span>

                    </li>
                    </g:if>

                    <g:if test="${listingInstance?.bids}">
                    <li class="fieldcontain">
                        <span id="lastBid-label" class="property-label"><g:message code="listing.bids.label" default="Minimum Bid" /></span>

                            <span class="property-value" aria-labelledby="lastBid-label"><span data-bind="text: minBid"></span></span>

                    </li>
                    </g:if>

                    <li id="container" class="fieldcontain">
                        <span class="property-value">Current Bids</span>
                    </li>
                    <li id="container" class="fieldcontain">
                        <div data-bind="foreach: bids">
                            <span class="property-label">Amount: <span data-bind="text: amount"></span></span>
                            <span class="property-value">Date: <span data-bind="text: dateCreated"></span></span>
                        </div>
                    </li>

                    <li class="fieldcontain">
                        <span id="addBid-label" class="property-label">&nbsp;</span>

                            <g:link action="addBid" id="${listingInstance.id}" class="property-value" aria-labelledby="addBid-label">Add Bid</g:link>
                    </li>

                    <li class="fieldcontain">
                        <span id="test-label" class="property-label">&nbsp;</span>
                        <a class="fancybox property-value" href="#addBidBox" id="addBidLink">Add Bid Ajax</a>
                    </li>

                </ol>
                <g:form>
                    <fieldset class="buttons">
                        <g:hiddenField name="id" value="${listingInstance?.id}" />
                        <g:link class="edit" action="edit" id="${listingInstance?.id}"><g:message code="default.button.edit.label" default="Edit" /></g:link>
                        <g:actionSubmit class="delete" action="delete" value="${message(code: 'default.button.delete.label', default: 'Delete')}" onclick="return confirm('${message(code: 'default.button.delete.confirm.message', default: 'Are you sure?')}');" />
                    </fieldset>
                </g:form>
            </g:else>
		</div>
        <div id="addBidBox" style="width:300px;display: none;">
            <h3>Add a bid</h3>
            <div id="inputDiv">
                <p><span>Amount: $&nbsp;</span><input type="text" id="newBidAmount"/></p>
                <input type="button" value="Submit Bid" id="newBidSubmit"/>
            </div>
            <div id="statusDiv" style="display: none;">
                <p><span data-bind="text: status"></span></p>
            </div>
        </div>
	</body>
</html>
